<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="1200" height="600" style="border:1px solid red"></canvas>
</body>
<script>
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");


    //大圆的圆心的x轴
    var bigX = 50;
    //大圆的圆心的y轴
    var bigY = 60;
    //大圆的半径
    var bigRadius = 50;
    //小圆的半径
    var smallRadius = 5;

    function Chain(ctx, bigX, bigY, bigRadius, smallRadius, num) {
        this.init(ctx, bigX, bigY, bigRadius, smallRadius, num);
    }
    Chain.prototype = {
        constructor: Chain,

        init:function(ctx, bigX, bigY, bigRadius, smallRadius, num){
            this.drawBigCircle(ctx, bigX, bigY, bigRadius);
            this.drawSmallCircles(ctx, bigX, bigY, bigRadius, smallRadius, num);
        },

        drawBigCircle: function (ctx, bigX, bigY, bigRadius) {
            ctx.beginPath();
            ctx.arc(bigX, bigY, bigRadius, 0, 2 * Math.PI);
            ctx.stroke();
        },

        drawSmallCircle: function (ctx, bigX, bigY, bigRadius, smallRadius, radius) {
            ctx.beginPath();

            //小圆的圆心所在大圆的弧度
            //var radius=0.3*Math.PI;
            var h = Math.sin(radius) * bigRadius;

            var b = Math.cos(radius) * bigRadius;

            var x = bigX + b;
            var y = bigY + h;

            ctx.arc(x, y, smallRadius, 0, 2 * Math.PI);
            ctx.fillStyle = "pink";
            ctx.fill();

        },
        /**
         * 根据小圆的个数来绘制
         */
        drawSmallCircles: function (ctx, bigX, bigY, bigRadius, smallRadius, num) {
            //从哪个弧度开始绘制
            var startRadius = 0.1 * Math.PI;
            //相邻小圆之间的弧度的差值
            var singleRadius = 2 * Math.PI / num;

            for (var i = 0; i < num; i++) {
                //计算出每一个小圆的圆心所在的弧度值
                var singleRadius2 = startRadius + singleRadius * i;
                this.drawSmallCircle(ctx, bigX, bigY, bigRadius, smallRadius, singleRadius2);
            }
        }

    }

    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 10; j++) {
            var chain=new Chain(ctx, bigX+120*j, bigY+120*i, bigRadius, smallRadius, 5);
        }

    }





    /**
     * 根据角度计算弧度
     * @param angle
     * @returns {number}
     */
    function toRadius(angle) {
        return angle * Math.PI / 180;
    }
</script>
</html>